<!--
* @desc
* @Author: bitqiang<bitqiang@outlook.net>
* @date: 2018/6/28 11:54
-->

<template>
  <div @touchmove="touchmoveHandler" @touchstart="touchstartHandler" @touchend="touchendHandler">
    <text class="title">Tabata</text>
    <canvas canvas-id="myCanvas" :style="{ width: _width + 'px', height: _height + 'px', background: '#000'}"></canvas>
    <Button v-if="stuats === 0" class="button" style="background: #01350F;margin-left: 300rpx" @click="start">开始</Button>
    <div v-else>
      <Button class="button" style="background: #4B4B4B;margin-left: 100rpx" @click="end">结束</Button>
      <Button class="button" style="background: #01350F;margin-left: 240rpx" @click="pause">暂停</Button>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  const device = wx.getSystemInfoSync()
  const width = device.windowWidth
  const height = device.windowHeight / 2 - 20
  // todo 统计功能
  export default {
    data () {
      return {
        touch: {
          time: 0,
          interval: null,
          touchDot: 0,
          tmpFlag: true
        },
        ctx: null,
        text: '准备中', // 准备、运动、休息
        currentTime: '10 : 99',
        exercise: true,

        timer: null,

        // 新变量
        original: {
          readyTime: 0, // 准备时间
          restTime: 0, // 休息时间
          exerciseTime: 0, // 运动时间
          movement: 0, // 运动次数
          totle: 0 // 运动总时间
        },

        current: {
          readyTime: 0, // 准备时间
          restTime: 0, // 休息时间
          exerciseTime: 0, // 运动时间
          movement: 0, // 运动次数
          totle: 0 // 运动总时间
        },
        millisecond: 0,
        stuats: 0 // 未开始，1已经开始
      }
    },
    computed: {
      ...mapState({
        project: state => state.project,
        totle: state => state.totle
      }),
      _width () {
        return width
      },
      _height () {
        return height
      }
    },
    beforeMount () {
      this.$store.commit('getStore')
      let index = this.$route.query.index ? this.$route.query.index : 0
      let sport = this.project[index].sport
      this.original = {
        readyTime: sport[0].originalValue[1] * 60 + sport[0].originalValue[2],
        restTime: sport[1].originalValue[1] * 60 + sport[1].originalValue[2],
        exerciseTime: sport[2].originalValue[1] * 60 + sport[2].originalValue[2],
        movement: sport[3].value
      }
      this.original.totle = this.original.readyTime + this.original.restTime * Math.max((this.original.movement - 1), 0) + this.original.exerciseTime * Math.max(this.original.movement, 1)
      this.current = JSON.parse(JSON.stringify(this.original))
      this.drawClock('first')
    },
    methods: {
      start () {
        this.stuats = 1 // 修改当前状态为 已开始
        this.current.restTime = 0
        this.timer = setInterval(this.drawClock, 100)
      },
      pause () {
        this.stuats = 0 // 修改当前状态为 已开始
        this.drawClock()
        clearInterval(this.timer)
      },
      end () {
        let that = this
        // console.log(1)
        this.stuats = 0 // 修改当前状态为 已开始
        this.text = '结束啦'

        // 结束重新赋值
        clearInterval(this.timer)
        setTimeout(function () {
          that.drawClock('first')
        }, 1)

        this.exercise = true
        this.current = JSON.parse(JSON.stringify(this.original))
        this.$store.dispatch('addTotle', this.original.totle)
      },
      getShowTime (time) {
        let min = Math.max(Math.floor(time / 60), 0)
        let second = Math.max(Math.floor(time % 60), 0)
        if (min < 10) {
          min = `0${min}`
        }
        if (second < 10) {
          second = `0${second}`
        }
        this.currentTime = `${min} : ${second}`
      },
      computingTime (type) {
        // 查看是否还在准备时间
        if (type === 'first') {
          this.getShowTime(this.current.readyTime)
          return 1
        }

        if (this.current.readyTime > 0) {
          this.text = '准备中'
          if (this.stuats === 0) {
            this.text = '暂停中'
          }
          this.current.readyTime = this.current.readyTime - 0.1
          // console.log('准备时间')
          this.getShowTime(this.current.readyTime)
          return this.current.readyTime / this.original.readyTime
        }

        // 判断是否结束
        if (this.current.movement <= 0) {
          // console.log('判断是否结束')
          this.end()
          return 1
        }

        // 判断是否在运动
        if (this.exercise) {
          // console.log('运动时间')
          this.text = '运动中'
          if (this.stuats === 0) {
            this.text = '暂停中'
          }
          this.current.exerciseTime = this.current.exerciseTime - 0.1
          this.getShowTime(this.current.exerciseTime)
          if (this.current.exerciseTime <= 0) {
            this.current.movement--
            this.current.restTime = this.original.restTime
            this.exercise = false
          }
          return this.current.exerciseTime / this.original.exerciseTime
        } else {
          // console.log('休息时间')
          this.text = '休息中'
          if (this.stuats === 0) {
            this.text = '暂停中'
          }
          this.current.restTime = this.current.restTime - 0.1
          this.getShowTime(this.current.restTime)

          if (this.current.restTime <= 0) {
            // console.log('休息结束')
            this.exercise = true
            this.current.exerciseTime = this.original.exerciseTime
          }
          return this.current.restTime / this.original.restTime
        }
      },
      computingTotleTime (type) {
        // console.log('computingTotleTime', type)
        // 总时间 一个是初始时间一个是当前时间
        if (type === 'first') {
          return 1
        }
        this.current.totle = this.current.totle - 0.1
        return this.current.totle / this.original.totle
      },

      // 画图
      drawClock (type) {
        const ctx = wx.createCanvasContext('myCanvas')

        // 內圈 单项时间
        ctx.beginPath() // 需要用开始以及结束路径
        ctx.arc(width / 2, height / 2, 0.28985 * width, Math.PI / 180 * -90, (Math.PI * -0.5) + Math.PI / 180 * 360 * (1 - this.computingTime(type)))
        ctx.setLineWidth(0.04830917 * width)
        ctx.setStrokeStyle('#01FFFF')
        ctx.stroke()
        ctx.closePath()

        // 外圈 总时间
        ctx.beginPath()
        ctx.arc(width / 2, height / 2, 0.33816 * width, Math.PI / 180 * -90, (Math.PI * -0.5) + Math.PI / 180 * 360 * (1 - this.computingTotleTime(type)))
        ctx.setLineWidth(0.02415458 * width)
        ctx.setStrokeStyle('#FF08F9')
        ctx.stroke()
        ctx.closePath()

        // 文字
        ctx.beginPath()
        ctx.setFillStyle('#fff')
        ctx.setFontSize(0.048309178 * width)
        ctx.fillText(this.text, 0.439937 * width, 0.37974 * height)
        ctx.setFontSize(0.084541 * width)
        ctx.fillText(this.currentTime, 0.374396 * width, 0.56962 * height)
        ctx.closePath()
        ctx.draw()
      },
      touchstartHandler (e) {
        console.log('开始-----------------------------------------------------------------------------')
        this.touch.touchDot = e.touches[0].pageX // 获取触摸时的原点
        // 使用js计时器记录时间
        this.touch.interval = setInterval(() => {
          this.touch.time++
        }, 100)
      },
      touchmoveHandler (e) {
        if (this.stuats === 1) {
          return
        }
        let touchMove = e.touches[0].pageX

        // 向左滑动

        if (touchMove - this.touch.touchDot <= -40 && this.touch.time < 10 && this.touch.tmpFlag) {
          this.touch.tmpFlag = false
          this.$router.push('/pages/index')
          // console.log('// 向左滑动----------------------------------------------------------------------------')
        }

        // 向右滑动
        if (touchMove - this.touch.touchDot > 40 && this.touch.time < 10 && this.touch.tmpFlag) {
          this.touch.tmpFlag = false
          this.$router.push('/pages/index')
          // console.log('// 向右滑动----------------------------------------------------------------------------\'')
        }
      },
      touchendHandler () {
        // console.log('触摸结束-----  --------------------------------------------')
        this.touch.tmpFlag = true
        this.touch.time = 0
        clearInterval(this.touch.interval)
      }
    }
  }
</script>

<style>
  page {
    display: block;
    min-height: 100%;
    background-color: #000000;
    color: white;
  }
  .title{
    color:#fff;
    font-size: 40px;
    display: block;
    padding-top: 110rpx;
    padding-left: 250rpx;
  }
  .button{
    color: #fff;
    padding-top: 26rpx;
    display: inline-block;
    border-radius: 1000px;
    font-size: 40rpx;
    /*border: 1px solid red;*/
    height: 160rpx;
    width: 160rpx;
    margin-bottom: 215rpx;
  }
</style>
